<!DOCTYPE html>

<!-- Copyright (c) 2013, Google Inc. Please see the AUTHORS file for details.
     All rights reserved. Use of this source code is governed by a BSD-style
     license that can be found in the LICENSE file. -->

<!--
/**
 * A menu triggerred by a button.
 *
 * For flexibility, the button should be supplied by the client in the
 * tag's content: it must be a [spark-button] (all [spark-buttons] in the
 * content will be grabbed, but only the first one will activate the menu).
 *
 * The menu itself is formed from the rest of the nodes supplied in the tag's
 * content. However, only [spark-menu-item]s will be treated as selectable
 * menu items that will fire an event when clicked. The rest of the nodes,
 * in particular [spark-menu-separator]s, will become inactive menu content.
 *
 * When a selectable menu item is clicked, an 'activate' event will be fired.
 * See spark-selector and spark-selection for more information on this event.
 */
-->

<link rel="import" href="../../../packages/spark_widgets/common/spark_widget.html"/>
<link rel="import" href="../../../packages/spark_widgets/spark_button/spark_button.html"/>
<link rel="import" href="../../../packages/spark_widgets/spark_overlay/spark_overlay.html">
<link rel="import" href="../../../packages/spark_widgets/spark_menu/spark_menu.html"/>

<polymer-element name="spark-menu-button" extends="spark-widget"
    attributes="selected
                valueAttr
                opened
                arrow"
    on-keydown="{{keyDownHandler}}">

  <template>
    <link rel="stylesheet" href="spark_menu_button.css">

    <content id="button" select="spark-button"></content>

    <spark-overlay id="overlay"
        arrow="{{arrow}}"
        autoClose
        animation="fade">
      <spark-menu id="menu"
          selected="{{selected}}"
          valueAttr="{{valueAttr}}"
          on-activate="{{menuActivateHandler}}">
        <content></content>
      </spark-menu>
    </spark-overlay>
  </template>

  <script type="application/dart" src="spark_menu_button.dart"></script>
</polymer-element>
